<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  - 注意：
  - 本软件为www.joolun.com开发研制，未经购买不得使用
  - 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
  - 一经发现盗用、分享等行为，将追究法律责任，后果自负
-->
<template>
	<view :class="'bg-'+theme.backgroundColor">
		<cu-custom :isBack="true" :bgColor="showBg?'bg-'+theme.backgroundColor:''">
			<block slot="backText">返回</block>
			<block slot="content">一起拼团</block>
		</cu-custom>
		<view class="spellGroup">
			<image class="spellGroup-bg" src="https://joolun-plus-1313274050.cos.ap-nanjing.myqcloud.com/joolun-plus-uniapp/spellGroup-bg.png"></image>
			<view class="article no-card groupon-list">
				<view class="groupon-item margin-top-sm padding-tb" v-for="(item, index) in grouponInfoList" :key="index">
					<navigator v-if="theme.showType!=2" class="padding-lr " hover-class="none" :url="'/pages/shop/shop-detail/index?id=' + item.shopInfo.id">
						<view class="cu-avatar sm radius" :style="'background-image:url(' + item.shopInfo.imgUrl + ')'"></view>
						<text class="text-black text-bold margin-left-sm">{{item.shopInfo.name}}</text>
						<text class="cuIcon-right text-sm"></text>
					</navigator>
					<view class="flex padding-xs padding-bottom margin-top-sm align-center">
						<image :src="item.picUrl" mode="aspectFill" class="row-img margin-top-xs margin-left-sm"></image>
						<view class="margin-left-sm groupon-information">
							<view class="text-black text-df overflow-1 padding-right-sm">{{item.name}}</view>
							<view class="flex justify-start margin-top-sm align-center">
								<view class="text-price text-bold text-xl text-red">{{item.grouponPrice}}</view>
								<view class="text-price text-decorat text-df text-gray margin-left-sm">{{item.goodsSku.salesPrice}}</view>
								<view class="cu-tag bg-red radius sm margin-left" v-if="item.goodsSpu.freightTemplat.type == '2'">包邮</view>
							</view>
							<view class="flex">
								<view class="text-black margin-top overflow-2 text-gray text-xs">
									<text class="cu-tag line-orange radius margin-right-sm">{{item.grouponNum}}人团</text>已有{{item.launchNum}}人参与
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-center">
						<navigator class="cu-btn round shadow-blur btn-enter" :class="'bg-'+theme.backgroundColor" hover-class="none" :url="'/pages/groupon/groupon-detail/index?id=' + item.id"><text class="margin-left-xs">前去拼团</text></navigator>
					</view>
				</view>
			</view>
			<view :class="'cu-load ' + (loadmore?'loading':'over') + ' bg-'+theme.backgroundColor"></view>
		</view>
	</view>
</template>

<script>
	/**
	 * Copyright (C) 2018-2019
	 * All rights reserved, Designed By www.joolun.com
	 * 注意：
	 * 本软件为www.joolun.com开发研制，未经购买不得使用
	 * 购买后可获得全部源代码（禁止转卖、分享、上传到码云、github等开源平台）
	 * 一经发现盗用、分享等行为，将追究法律责任，后果自负
	 */
	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'
	import couponInfo from "components/coupon-info/index";

	export default {
		data() {
			return {
				showBg: false, //是否显示背景色
				scrollData: {},
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				page: {
					searchCount: false,
					current: 1,
					size: 10,
					ascs: 'sort',
					//升序字段
					descs: ''
				},
				parameter: {},
				loadmore: true,
				grouponInfoList: []
			};
		},
		//页面滑动 监听事件
		onPageScroll(e){
			if (e.scrollTop > 20) {
				this.showBg = true;
			} else {
				this.showBg = false;
			}
		},
		components: {
			couponInfo
		},
		props: {},

		onShow(e) {},
		onLoad: function(options) {
			if(options.shopId){
				this.parameter.shopId = options.shopId
			}
			app.initPage().then(res => {
				this.grouponInfoPage();
			});
		},

		onReachBottom() {
			if (this.loadmore) {
				this.page.current = this.page.current + 1;
				this.grouponInfoPage();
			}
		},

		onPullDownRefresh() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.refresh(); // 隐藏导航栏加载框

			uni.hideNavigationBarLoading(); // 停止下拉动作

			uni.stopPullDownRefresh();
		},

		methods: {
			grouponInfoPage() {
				api.grouponInfoPage(Object.assign({}, this.page, util.filterForm(this.parameter))).then(res => {
					let grouponInfoList = res.data.records;
					this.grouponInfoList = [...this.grouponInfoList, ...grouponInfoList];
					if (grouponInfoList.length < this.page.size) {
						this.loadmore = false;
					}
				});
			},

			refresh() {
				this.loadmore = true;
				this.grouponInfoList = [];
				this.page.current = 1;
				this.grouponInfoPage();
			}

		}
	};
</script>
<style>
	.groupon-list{
	}

	.row-img {
		width: 200rpx !important;
		height: 200rpx !important;
		border-radius: 10rpx
	}

	.spellGroup{
		min-height: 1450rpx;
	}
	
	.groupon-information{
		width: 460rpx;
	}

	.spellGroup-bg{
		width: 100%;
		height: 300rpx;
	}

	.btn-enter{
		width: 580rpx;
		height: 76rpx;
	}

	.groupon-item{
		background-color: #FFFFFF;
		width: 90%;
		margin: auto;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
</style>
